var React  = require('react');
import { Button, Icon,Input } from 'antd';
import  $ from 'jquery'
import './Album.css';
var NavLink=require('../modules/NavLink');
var Header=require('../modules/Header');
var Footer = require('../modules/Footer');
function getcomment(){
        $('#comments').html('');
        $.ajax({
            type:'GET',
            url:'http://www.wendy0508.online/api/content.php',
            dataType:'json',
            success:function(data){
                //console.log(data);
                var newArr=data.slice(0,10);
                console.log(newArr);
                for(var i=0;i<newArr.length;i++){
                   // console.log(newArr[i]);
                var text="<li id='con_box'><div style={{ padding:'10px', marginTop:'20px'}} >"+
                    "<p style={{ fontSize: '18px',color:'#108ee9' }}>作者："+newArr[i].user+"</p>"+
                    "<p class='text'>评论内容："+newArr[i].comment+"</p>"+
                    "<span>"+newArr[i].addtime+"</span></div></li>";
                    $('#comments').append(text);
                }
                
            }
        })
    }
export default class Detail extends React.Component{
     constructor(props){
        super(props)
        this.state={
            src:'',
            title:'',
            author:'',
            lang:''
        }
    }
    play(){        
        document.getElementById('aud').play();      
    }
    
    handerSubmit(e){
        e.preventDefault();
        //var that=this;
        //console.log(this);
        
        var ming=$('#ming').val();
        var content=$('#content').val();
        if(ming!=='' && content!==''){
            $.ajax({
                type:'POST',
                url:'http://www.wendy0508.online/api/comment.php',
                data:{
                    user:ming,
                    comment:content
                },
                success:function(msg){
                    if(msg==1){
                        $('#ming').val('');
                        $('#content').val('');
                        $('#tishi').text('发表成功');
                        getcomment();
                    }else{
                        $('#tishi').text('数据有误');
                    }
                }
            })
       }else{
           $('#tishi').text('*用户名或者内容不能为空')
       }
    }
    render(){
         var letterStyle = {
            clear:'both'
            };
        return(
            <div>
                <Header/>
                <div className="box" style={letterStyle}></div>
                <div className="detail_box">
                    <div className="detail_left">
                        <img className="detail_pic" src={this.state.src} />
                    </div>
                    <div className="detail_right">
                        <h1 className="detail_title">{this.state.title}</h1>
                        <h2 className="detail_author">歌手：{this.state.author}</h2>
                        <h3 className="detail_lang">语言：{this.state.lang}</h3>
                        <p className="btn_box">
                         <Button  onClick={this.play} className="btn1" type="primary" icon="play-circle" size={'large'}>播放</Button>
                         <Button type="primary" icon="download" size={'large'}>下载</Button>
                        </p>
                        <p className="audio_box">
                         <audio id="aud" src="http://www.wendy0508.online/api/4.mp3" muted="muted" controls="controls"></audio>
                        </p>
                    </div>
                    <div className="box" style={letterStyle}></div>
                    <div className="comment">
                    <h2 className="comment_title">发表评论：</h2>
                    <div>
                      <Input id="ming" style={{marginTop:'20px',width:'100px',height:'50px'}} type="textarea" placeholder="请输入你的姓名" autosize />
                      <div style={{ margin: '24px 0' }} />
                      <Input id="content" type="textarea" placeholder="请添加评论" autosize={{ minRows: 2, maxRows: 6 }} />
                      <span id="tishi" style={{display:'block',color:'red',fontSize:'14px',height:'20px'}}></span>
                      <Button id="submit" onClick={this.handerSubmit} style={{marginTop:'20px',display:'block'}} type="primary">提交</Button>
                    </div>
                    </div>
                    <div style={{marginLeft:'209px',marginTop:'30px'}}>
                    <h2 className='newcomments' style={{marginTop:'20px',marginBottom:'20px'}} >最新评论</h2>
                    <ul id='comments'>

                    </ul>
                    </div>
                </div>
                
            </div>
        )
    };
    componentDidMount(){
         //这里利用了url来传递数据
        var urlstring=window.location.href;
        //console.log(urlstring);
        var newstring=urlstring.substring(31,40);
        var newstring1=urlstring.substring(31,40);
        //console.log(newstring);
        var that = this;
        $.ajax ({  
        type:"GET",  
        url:'http://tingapi.ting.baidu.com/v1/restserver/ting?format=json&calback=&from=webapp_music&method=baidu.ting.billboard.billList&type=2&size=20&offset=0',  
        dataType:"jsonp",    
        success: function(data){  
            console.log(1) 
             console.log(data)   
            var arr=data.song_list;
            //console.log(arr);
            for(var i=0;i<arr.length;i++){
                if(arr[i].song_id==newstring){
                    that.setState({
                        list:arr[i],
                        src:arr[i].pic_big,
                        title:arr[i].title,
                        author:arr[i].author,
                        lang:arr[i].language
                    })
                }
            }
            
            }  
        }); 
         $.ajax({
            type:"GET",
            url:'http://tingapi.ting.baidu.com/v1/restserver/ting?format=json&calback=&from=webapp_music&method=baidu.ting.billboard.billList&type=25&size=20&offset=0',
            dataType:"jsonp",
            success:function(data){
                var arr=data.song_list;
                //console.log(newstring1)
                 for(var i=0;i<arr.length;i++){
                if(arr[i].song_id==newstring1){
                    that.setState({
                        list:arr[i],
                        src:arr[i].pic_big,
                        title:arr[i].title,
                        author:arr[i].author,
                        lang:arr[i].language
                    })
                }
            }
            }

    });
    //一开始就进行刷新数据
    getcomment();
    
    }

}